<template>
	<view class="container">
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
				@tap="switchTab(index)">
				{{tab}}
			</view>
		</view>

		<scroll-view class="order-list" scroll-y @scrolltolower="loadMore" :style="{ height: scrollViewHeight }">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" @tap="goToDetail(item.id)">
				<view class="order-header">
					<text class="order-type">{{item.type}}</text>
					<text class="order-status" :style="{color: getStatusColor(item.status)}">{{item.status}}</text>
				</view>
				<view class="order-content">
					<view class="order-info">
						<text class="order-title">{{item.title}}</text>
						<text class="order-desc">{{item.description}}</text>
					</view>
					<view class="order-price">
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
				<view class="order-footer">
					<text class="time">{{item.createTime}}</text>
					<text class="location">{{item.location}}</text>
				</view>
				<view class="action-buttons" v-if="currentTab === 0">
					<button class="btn cancel" v-if="item.status === '待接单'"
						@tap.stop="cancelOrder(item.id)">取消订单</button>
					<button class="btn complete" v-if="item.status === '进行中'"
						@tap.stop="completeOrder(item.id)">完成订单</button>
				</view>
				<view class="action-buttons" v-if="currentTab === 1">
					<button class="btn cancel" v-if="item.status === '进行中'" @tap.stop="quitOrder(item.id)">放弃接单</button>
					<button class="btn complete" v-if="item.status === '进行中'"
						@tap.stop="finishOrder(item.id)">完成配送</button>
				</view>
			</view>

			<view class="loading" v-if="isLoading">
				<uni-load-more status="loading" :content-text="loadMoreText"></uni-load-more>
			</view>

			<view class="empty" v-if="orderList.length === 0">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无相关订单</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['我发布的', '我接受的'],
				currentTab: 0,
				orderList: [],
				page: 1,
				pageSize: 10,
				isLoading: false,
				hasMore: true,
				scrollViewHeight: '100vh',
				loadMoreText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			// 设置scroll-view高度
			const systemInfo = uni.getSystemInfoSync()
			const tabsHeight = 88 // tabs的高度，单位rpx
			this.scrollViewHeight = systemInfo.windowHeight - (tabsHeight * systemInfo.windowWidth / 750) + 'px'

			this.loadInitialData()
		},
		methods: {
			async loadInitialData() {
				this.page = 1
				this.orderList = []
				this.hasMore = true
				await this.loadOrders()
			},
			async switchTab(index) {
				if (this.currentTab === index) return
				this.currentTab = index
				await this.loadInitialData()
			},
			getStatusColor(status) {
				const colors = {
					'待接单': '#ff9900',
					'进行中': '#2979ff',
					'已完成': '#09bb07'
				}
				return colors[status] || '#999'
			},
			async loadMore() {
				if (this.isLoading || !this.hasMore) return
				this.page++
				await this.loadOrders()
			},
			async loadOrders() {
				if (this.isLoading) return
				this.isLoading = true

				// 模拟API请求
				await new Promise(resolve => setTimeout(resolve, 1000))

				// 模拟获取订单数据
				const mockOrders = [{
						id: this.orderList.length + 1,
						type: '取快递',
						status: '待接单',
						title: '帮取快递',
						description: '菜鸟驿站有一个快递，求帮忙取一下',
						price: 5,
						createTime: '2024-03-20 14:30',
						location: '菜鸟驿站'
					},
					{
						id: this.orderList.length + 2,
						type: '买饭',
						status: '进行中',
						title: '帮买午饭',
						description: '一食堂二楼炒饭，要辣椒',
						price: 8,
						createTime: '2024-03-20 11:30',
						location: '一食堂'
					}
				]

				// 模拟分页逻辑
				if (this.page > 3) { // 模拟只有3页数据
					this.hasMore = false
				} else {
					this.orderList = [...this.orderList, ...mockOrders]
				}

				this.isLoading = false
			},
			goToDetail(id) {
				const order = this.orderList.find(item => item.id === id)
				if (order) {
					const orderInfo = encodeURIComponent(JSON.stringify(order))
					uni.navigateTo({
						url: '/pages/order-detail/index?orderInfo=' + orderInfo
					})
				}
			},
			cancelOrder(id) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 发送取消订单请求
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							})
						}
					}
				})
			},
			completeOrder(id) {
				uni.showModal({
					title: '提示',
					content: '确定要完成该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 发送完成订单请求
							uni.showToast({
								title: '订单已完成',
								icon: 'success'
							})
						}
					}
				})
			},
			quitOrder(id) {
				uni.showModal({
					title: '提示',
					content: '确定要放弃该订单吗？放弃后可能会影响您的信用评分',
					success: (res) => {
						if (res.confirm) {
							// TODO: 发送放弃订单请求
							uni.showToast({
								title: '已放弃订单',
								icon: 'success'
							})
						}
					}
				})
			},
			finishOrder(id) {
				uni.showModal({
					title: '提示',
					content: '确定已完成配送吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 发送完成配送请求
							uni.showToast({
								title: '配送已完成',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: $background-color;
		display: flex;
		flex-direction: column;
	}

	.tabs {
		background-color: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		height: 88rpx;
		box-sizing: border-box;
		display: flex;

		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: $text-color-grey;
			position: relative;

			&.active {
				color: #2979ff;

				&::after {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #2979ff;
					border-radius: 2rpx;
				}
			}
		}
	}

	.order-list {
		flex: 1;
		padding: 0 20rpx;

		.order-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.order-type {
					font-size: 28rpx;
					color: $text-color;
					font-weight: bold;
				}

				.order-status {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.order-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;

				.order-info {
					flex: 1;
					margin-right: 20rpx;

					.order-title {
						font-size: 32rpx;
						color: $text-color;
						margin-bottom: 10rpx;
						display: block;
						font-weight: bold;
					}

					.order-desc {
						font-size: 28rpx;
						color: $text-color-grey;
						display: block;
						line-height: 1.4;
					}
				}

				.order-price {
					.price {
						color: #ff5500;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.order-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: $text-color-grey;
				margin-bottom: 0;
				padding-top: 20rpx;
				border-top: 1rpx solid $border-color;
			}

			.action-buttons {
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;

				.btn {
					margin-left: 20rpx;
					font-size: 24rpx;
					padding: 5rpx 25rpx;
					border-radius: 30rpx;
					min-width: 140rpx;
					text-align: center;

					&.cancel {
						background-color: #f5f5f5;
						color: $text-color-grey;
					}

					&.complete {
						background-color: #2979ff;
						color: #fff;
					}
				}
			}
		}
	}

	.loading {
		text-align: center;
		padding: 20rpx 0;
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 200rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}

		text {
			font-size: 28rpx;
			color: $text-color-grey;
		}
	}
</style>